<template>
  <div class="home">
    <div class="title">
      <h3 class="head-font">首页</h3>
      <div class="member" @click="getMemberInfo">
        <img src="@/assets/images/icon-member.png" alt="">
        <div class="member-info" v-show="isShow">
           <h3 class="tit-font">{{memberInfo.name}}<span>({{memberInfo.post}})</span></h3>
          <p>{{memberInfo.tel}}</p>
          <router-link to="/login">
            退出登录
          </router-link>
        </div>
      </div>
    </div>
    <ul class="nav">
      <li>
        <router-link to="/trafficMonitor">
          <img src="@/assets/images/nav-kljk.png" alt="">
          <div class="text-box">
            <h3>客流监控</h3>
            <span>Traffic monitoring</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/history">
          <img src="@/assets/images/nav-lskl.png" alt="">
          <div class="text-box">
            <h3>历史客流</h3>
            <span>The history of passenger</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/trafficStatistics">
          <img src="@/assets/images/nav-kltj.png" alt="">
          <div class="text-box">
            <h3>客流统计</h3>
            <span>Traffic statistics</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/channelAnalysis">
          <img src="@/assets/images/nav-qdfx.png" alt="">
          <div class="text-box">
            <h3>渠道分析</h3>
            <span>Channel analysis</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/touristsPortrait">
          <img src="@/assets/images/nav-ykhx.png" alt="">
          <div class="text-box">
            <h3>游客画像</h3>
            <span>Tourists portrait</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/holiday">
          <img src="@/assets/images/nav-jjrkl.png" alt="">
          <div class="text-box">
            <h3>节假日客流</h3>
            <span>Holiday passenger flow</span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      isShow: false,
      isLogin: 0, // 0 登录  1 未登录
      memberInfo: { name: '李明月', post: '操作管理员', tel: '18813157984' }
    }
  },
  methods: {
    getMemberInfo () {
      if (this.isLogin === 0) {
        this.isShow = true
      } else {
        this.isShow = false
        this.$router.push({ path: '/login' })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:4vw;
    >h3{
      font-size:48/7.5vw;
    }
    .member{
      position: relative;
      width: 90/7.5vw;
      .member-info{
        position: absolute;
        left:-300/7.5vw;
        top:50%;
        width: 316/7.5vw;
        padding:22/7.5vw;
        background-color: #fff;
        border-radius: 20/7.5vw 4/7.5vw 20/7.5vw 20/7.5vw;
        z-index: 999;
        >h3{
          font-size: 32/7.5vw;
          >span{
            font-size: 28/7.5vw;
            font-weight: normal;
            font-family: PingFangSC;
          }
        }
        >p{
          margin:10/7.5vw 0;
          font-size: 28/7.5vw;
          color: #999;
        }
        >a{
          display: block;
          text-align: right;
        }
      }
    }
  }
  .nav{
    padding:8vw 2vw;
    display: flex;
    flex-wrap: wrap;
    li{
      position: relative;
      width:50%;
      >a{
        display: block;
      }
      .text-box{
        position: absolute;
        left:4vw;
        top:4vw;
        width: 28vw;
        >h3{
          font-size:42/7.5vw;
          color: #fff;
          margin-bottom:15/7.5vw;
          font-family: PingFangSC-Semibold;
        }
        >span{
          font-size: 20/7.5vw;
          color: rgba(255,255,255,.6);
          text-transform:uppercase;
        }
      }
      &:nth-of-type(2n){
        margin-right:0;
      }
    }
  }
</style>
